const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const path = require('path')
module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: './src/main.js',
    output: {
        filename: '[contenthash:8].bundle.js',
        path: path.join(__dirname, 'dist'),
    },
    mode: 'development',
    optimization: {
        // 开启tree shaking功能
        usedExports: true,
        // minimize: true,
        // 将模块合并在一个函数中
        // concatenateModules: true,
        splitChunks: {
            chunks: 'all' // 提取公共模块到单独文件
        },
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin(),
            new TerserWebpackPlugin() // 手动添加js压缩插件
        ]
    },
    module: {
        rules: [
            // 解析并加载less文件
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ]
            },
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: 'eslint-loader',
                enforce: 'pre'
            },
            // 加载图片资源
            {
                test: /\.png$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024,
                        esModule: false
                    }
                }
            },
            // 处理.vue文件
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(), // 执行vue插件
        new HtmlWebpackPlugin({
            filename: 'index.html',
            title: '我的webpack',
            template: './public/index.html',
            templateParameters: {
                BASE_URL: './'
            }
        }),
        new MiniCssExtractPlugin(),
        new StyleLintPlugin({
            // 正则匹配想要lint监测的文件
            files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss'] 
        })
        // new webpack.DefinePlugin({
        //     BASE_URL: JSON.stringify('./')
        // })
    ]
}